<template>
  <div>
    <div>
      参数管理
    </div>
    <div class="search-box"></div>
    <!--参数列表-->
    <div style="overflow:hidden;border-top:1px solid #ccc">
      <el-table :data="paramsList" stripe style="width:100%" v-loading="loading">
        <el-table-column prop="paraId" label="角色ID" min-width="200"></el-table-column>
        <el-table-column prop="paraType" label="角色" min-width="200"></el-table-column>
        <el-table-column prop="paraName" label="描述" min-width="200"></el-table-column>
        <el-table-column prop="srcParaId" label="创建时间" min-width="200"></el-table-column>
        <el-table-column label="操作" min-width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="editUser(scope.$index, scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页功能-->
      <el-pagination
        style="margin-top:20px;justify-content:flex-end;display:flex;"
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="currentPage"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!--修改弹窗-->
    <el-dialog title="修改角色" :visible.sync="editDialogVisible" width="30%" :close-on-click-modal="false">

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="editCancel">取 消</el-button>
        <el-button size="small" type="primary" @click="editSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import server from '../../services/index'
  var validatePhone = (rule, value, callback) => {
    if(value === ''){
      callback(new Error('请输入电话号码！'));
    }else{
      if(!(/^1(3|4|5|7|8)\d{9}$/.test(value))){
        callback(new Error('请输入正确电话号码！'));
      }
      callback();
    }
  };
  export default {
    name: "operationAccount",
    components: {},
    data () {
      return {
        paramsList: [],
        loading: false,
        total: 0,
        currentPage: 1,
        pageSize: 10,
        editDialogVisible: false,
        editForm: {
          name: "",
          description: ""
        },
        editRules: {
          name: [
            { required: true, message: '请输入角色名！', trigger: ['blur', 'change'] },
          ],
          description: [
            { required: true, message: '请输入角色描述！', trigger: ['blur', 'change'] },
          ]
        },
      }
    },
    methods:{
      getListData(){
        this.loading = true;
        let params = {
          pageSize: this.pageSize,
          pageNum: this.currentPage,
        }
        $.ajax({
          url:server.paramsList.url,
          type:'get',
          data:params,
          dataType:'json',
          success:res => {
            if(res.code == 1){
              this.loading = false;
              this.paramsList = res.result.sysList;
              this.total = res.result.total;
            }
          },
          error:err =>{
            this.$message({
              message: err.responseJSON.error,
              type: 'error'
            });
          }
        });
      },
      sizeChange(val){
        this.pageSize = val;
        this.getListData();
      },
      currentChange(val){
        this.currentPage = val;
        this.getListData();
      },
      editUser(index, row){
        this.editForm.roleId = row.roleId;
        this.editForm.name = row.name;
        this.editForm.description = row.description;
        this.editDialogVisible = true;
      },
      editSubmit(){
        this.$refs.editForm.validate((valid) => {
          if(valid){
            this.$confirm('确认修改？').then(() => {

            }).catch(() => {});
          }else{
            return false;
          }
        });
      },
      editCancel(){
        this.editDialogVisible = false;
        this.$refs.editForm.resetFields();
      },
      getNowFormatDate(time) {
        var date = time;
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year + "-" + month + "-" + strDate;
        return currentdate;
      },
    },
    mounted(){
      if(!window.sessionStorage.getItem("token"))this.$router.push({path: '/'});
      this.getListData()
    }
  }
</script>

<style scoped>
  .search-box{
    margin: 20px 0;
  }
</style>
